<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //   function ajax1() {
      //     setTimeout(() => {
      //       var arr = [{ name: "张三" }, { name: "李四" }, { name: "王五" }];
      //     }, 1000);
      //   }

      //   function ajax2() {
      //     setTimeout(() => {
      //       // 等待 ajax1 执行之后 获取arr数据 ，在这个数据基础上加上 age
      //       // arr2 = [{name:"张三",age:20},{name:"李四",age:23},{name:"王五",age:21}]
      //       // 把所有数据获取完成后 ，通过ul li 渲染到页面上；
      //     }, 1500);
      //   }
      function ajax1() {
        return new Promise((resolve) => {
          setTimeout(() => {
            var arr = [{ name: "张三" }, { name: "李四" }, { name: "王五" }];
            resolve(arr);
          }, 1000);
        });
      }
      function ajax2(arr) {
        return new Promise((resolve) => {
          setTimeout(() => {
            // 加上年龄
            var newArr = arr.map((item) => ({ name: item.name, age: 20 }));
            resolve(newArr);
          }, 1000);
        });
      }
      //await方法
      (async function () {
        let arr = await ajax1();
        console.log(arr);
        let arr2 = await ajax2(arr);
        console.log(arr2);
        renderDom(arr2);
      })();

      //
      //then方法
      //   ajax1()
      //     .then((res) => {
      //       return ajax2(res);
      //     })
      //     .then((res) => {
      //       renderDom(res);
      //     })();

      function renderDom(arr2) {
        let ulEle = document.createElement("ul");
        arr2.forEach((item) => {
          let liEle = document.createElement("li");
          liEle.innerHTML = `姓名是${item.name};年龄是${item.age}`;
          ulEle.appendChild(liEle);
        });
        document.body.appendChild(ulEle);
      }
    </script>
  </body>
</html>
